<template>
  <div class="login-container">
    <div class="login-box">
      <!-- Logo区域 -->
      <div class="logo-area">
        <img :src="logoUrl" alt="智能家居logo" class="logo-image" />
        <h1 class="logo-title">智能家居管理系统</h1>
      </div>
      <!-- 登录表单 -->
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="input-group">
          <input type="tel" v-model="form.phone" placeholder="请输入手机号" class="form-input" />
          <i class="fas fa-phone input-icon"></i>
        </div>
        <div class="input-group">
          <input :type="showPassword ? 'text' : 'password'" v-model="form.password" placeholder="请输入密码"
            class="form-input" />
          <i :class="['fas', showPassword ? 'fa-eye-slash' : 'fa-eye', 'input-icon']"
            @click="showPassword = !showPassword"></i>
        </div>
        <div class="form-options">
          <label class="remember-password">
            <input type="checkbox" v-model="form.remember" class="checkbox" />
            <span>记住账号</span>
          </label>
          <div @click="ForgotPassword" class="forget-password">忘记密码？</div>
        </div>
        <!-- 登录按钮 -->
        <button type="submit" class="login-button !rounded-button whitespace-nowrap">
          一键登录
        </button>

        <!-- 错误提示信息 -->
        <p v-if="errorMessage" class="text-red-500 text-sm mt-2">{{ errorMessage }}</p>

      </form>
      <!-- 社交登录 -->
      <div class="social-login">
        <div class="divider">
          <span>其他登录方式</span>
        </div>
        <div class="social-buttons">
          <button class="social-btn" @click="socialLogin('wechat')">
            <img src="../assets/微信.svg" alt="微信登录" style="width: 50px; height: 50px;">
          </button>
          <button class="social-btn" @click="socialLogin('qq')">
            <img src="../assets/QQ-circle-fill.svg" alt="QQ登录" style="width: 50px; height: 50px;">
          </button>
          <button class="social-btn" @click="socialLogin('zhifubao')">
            <img src="../assets/支付宝.svg" alt="支付宝登录" style="width: 50px; height: 50px;">
          </button>
        </div>
      </div>
      <!-- 注册引导 -->
      <div class="register-guide">
        <p>首次使用？快速注册体验智能家居</p>
        <button @click="goToRegister" class="register-button !rounded-button whitespace-nowrap">
          新用户注册
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const logoUrl = 'https://ai-public.mastergo.com/ai/img_res/fa9ebd321e755abb598e14241029a986.jpg';
const showPassword = ref(false);
const form = ref({
  phone: '',
  password: '',
  remember: false
});

// 记住密码功能初始化
onMounted(() => {
  const savedPhone = localStorage.getItem('savedPhone');
  if (savedPhone) {
    form.value.phone = savedPhone;
    form.value.remember = true;
  }
});

// 登录逻辑
const errorMessage = ref(''); // 新增响应式变量用于错误提示

const handleLogin = async () => {
  errorMessage.value = ''; // 每次点击登录时先清空错误
  try {
    if (!form.value.phone || !form.value.password) {
      throw new Error('请输入完整的登录信息');
    }

    const response = await axios.post('http://localhost:8080/api/auth/login', {
      phone: form.value.phone,
      password: form.value.password
    });

    if (response.data.code === 200) {
      if (form.value.remember) {
        localStorage.setItem('savedPhone', form.value.phone);
      } else {
        localStorage.removeItem('savedPhone');
      }
      localStorage.setItem('loggedInPhone', form.value.phone);
      router.push('/home');
    } else {
      errorMessage.value = response.data.msg || '登录失败，请重试';
    }
  } catch (error: any) {
    errorMessage.value = error.response?.data?.msg || error.message || '登录失败，请检查网络连接';
  }
};

const socialLogin = (platform: string) => {
  console.log('社交平台登录：', platform);
};

// 跳转注册页面
const goToRegister = () => {
  router.push('/register');
};

const ForgotPassword = () => {
  router.push('/ForgotPassword')
}
</script>

<style scoped>
@import '../assets/css/LoginView.css';
</style>
